<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../jqtool/jquery.tools.min.js">
        </script>
		<link rel="stylesheet" type="text/css" href="./css/slideshow_plugin_for_the_tabs.css">
    </head>
    <body>
        <!-- "previous slide" button <a class="backward">prev</a>-->
        <!-- container for the slides -->
        <div class="panel-main-images">
            <!-- first slide -->
            <div>
                <h3>First pane</h3>
            </div>
            <!-- second slide -->
            <div>
                <h3>Second pane</h3>
            </div>
            <!-- third slide -->
            <div>
                <h3>Third pane</h3>
            </div>
        </div>
        <!-- "next slide" button <a class="forward">next</a>-->
        <!-- the tabs -->
        <div class="panel-main-images-slidetabs">
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
        <script type="text/javascript">
            $(".panel-main-images-slidetabs").tabs(".panel-main-images > div", {
                // enable "cross-fading" effect
                effect: 'fade',
                fadeOutSpeed: "slow",
                // start from the beginning after the last tab
                rotate: true
                // use the slideshow plugin. It accepts its own configuration
            }).slideshow();
			
           // <button onClick='$(".slidetabs").data("slideshow").play();'>
           //     Play
           // </button>
           // <button onClick='$(".slidetabs").data("slideshow").stop();'>
           //     Stop
           // </button>			
        </script>
    </body>
</html>
